<template>
	<view class="submit-order">
		<!--商品详情 提交订单 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx">提交订单</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c just-sw po-re"
			:style="{ height: containerHeight }"
			style="background-color: #f2f3f7"
		>
			<view>
				<!--  -->
				<view
					@click="toxzaddress"
					style="margin: 20rpx 0rpx; padding: 48rpx 0rpx 0rpx 36rpx; height: 256rpx"
					class="bg-ff d-flex b-box flex-c ali-i-s just-s w-750 po-re"
				>
					<block v-if="addresslist">
						<text
							class="pf-sc fw-500"
							style="font-size: 34rpx; color: #000000; margin-bottom: 12rpx"
						>
							{{ addresslist.location }}
						</text>
						<text class="c-333 pf-sc fw-400" style="font-size: 30rpx; margin-bottom: 20rpx">
							{{ addresslist.address }}
						</text>
						<view class="d-flex flex-r ali-i-c just-s b-box">
							<text
								class="pf-sc fw-500"
								style="font-size: 30rpx; color: #000000; margin-right: 32rpx"
							>
								{{ addresslist.name }}
							</text>
							<text class="pf-sc fw-500" style="font-size: 30rpx; color: #000000">
								{{ addresslist.mobile }}
							</text>
						</view>
					</block>
					<block v-else>请先添加地址</block>

					<view style="width: 17rpx;height: 23rpx;right: 32rpx;top:45%" class="po-ab">
						<image
							:src="require('../static/rightc.png')"
							style="width: 17rpx;height: 23rpx;"
						></image>
					</view>
				</view>
				<!--  -->
				<view
					style="height: 438rpx;padding: 34rpx 32rpx;"
					class="w-750 bg-ff b-box d-flex flex-c ali-i-s just-s"
				>
					<view class=" d-flex flex-r ali-i-c just-s b-box" style="margin-bottom: 20rpx;">
						<view style="width: 144rpx;height: 144rpx;margin-right: 20rpx;">
							<image
								:src="'https://www.chejingjing.cn' + image"
								style="width: 144rpx;height: 144rpx;"
							></image>
						</view>
						<view style="width: 346rpx" class="d-flex flex-c ali-i-s just-s b-box">
							<text
								style="width: 346rpx; margin-bottom: 12rpx; font-size: 28rpx; color: #262626"
								class="text-ep-1 pf-sc fw-500"
							>
								{{ name }}
							</text>
							<view v-for="(item, index) of specs" :key="index">
								<text class="pf-sc fw-400" style="font-size: 24rpx; color: #666666">
									{{ item.parrentTitle }}: {{ item.title }}
								</text>
							</view>
						</view>
						<view style="width: 105px;" class="d-flex flex-c ali-i-e just-c b-box">
							<text
								style="min-width: 144rpx; margin-bottom: 12rpx; font-size: 25rpx; color: #262626; display: inline-block;margin-right: 64rpx;"
								class="pf-sc fw-500"
							>
								原价: ¥ {{ price == 'null' ? 0 : price }}
							</text>
							<text
								v-if="user.level != 0"
								style="width: 100px; margin-bottom: 12rpx; font-size: 25rpx; color: red; display: inline-block;margin-right: 10rpx;"
								class="pf-sc fw-500"
							>
								会员价: ¥ {{ hyprice == 'null' ? 0 : hyprice }}
							</text>
							<text
								class="pf-sc fw-400"
								style="font-size: 24rpx; color: #666666; display: inline-block;margin-right: 100rpx;"
							>
								*{{ count }}
							</text>
						</view>
					</view>
					<!--  -->
					<view style="flex: 1" class="d-flex flex-c ali-i-s just-ev b-box w-100">
						<view class="d-flex flex-r ali-i-c just-sw b-box w-100" style="margin-bottom: 10px">
							<text class="pf-sc fw-400" style="font-size: 30rpx; color: rgba(0, 0, 0, 0.9)">
								配送方式
							</text>
							<text class="pf-sc fw-400" style="font-size: 30rpx; color: #999999">物流快递</text>
						</view>
						<!-- <view class="d-flex flex-r ali-i-e just-sw b-box w-100">
							<text class="pf-sc fw-400 " style="font-size: 30rpx;color: rgba(0,0,0,0.9000);">
								运费
							</text>
							<text class="pf-sc fw-400 " style="font-size: 30rpx;color: #FF5C00;">￥10</text>
						</view> -->
						<view class="d-flex flex-r ali-i-c just-sw b-box w-100">
							<text class="pf-sc fw-400" style="font-size: 30rpx; color: rgba(0, 0, 0, 0.9)">
								备注
							</text>
							<input v-model="beizhu" type="text" placeholder="请输入备注" />
						</view>
					</view>
				</view>
			</view>
			<!-- btn -->
			<view
				style="height: 130rpx; padding: 0 40rpx 0 20rpx; position: fixed; bottom: 20rpx; z-index: 999; background-color: #fff"
				class="w-750 b-box d-flex flex-r ali-i-c just-sw ali-s-e bg-ff"
			>
				<view class="d-flex flex-r ali-i-c just-s">
					<view class="d-flex flex-r ali-i-c just-s" v-if="!user.level">
						<text class="pf-sc fw-400 c-333" style="font-size: 35rpx; white-space: nowrap">
							合计：
						</text>
						<text class="pf-sc fw-400 po-re" style="font-size: 35rpx; color: #ed1d15; top: 2rpx;margin-right: 5px">
							¥
						</text>
						<text class="pf-sc fw-400" style="font-size: 35rpx; color: #ed1d15">
							{{ price == 'null' ? 0 : price * count }}
						</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-s" v-if="user.level">
						<text class="pf-sc fw-400 c-333" style="font-size: 35rpx; white-space: nowrap">
						  会员：
						</text>
						<text class="pf-sc fw-400 po-re" style="font-size: 35rpx; color: #ed1d15; top: 2rpx;margin-right: 5rpx">
							¥
						</text>
						<text class="pf-sc fw-400" style="font-size: 35rpx; color: #ed1d15">
							{{ hyprice == 'null' ? 0 : hyprice * count }}
						</text>
					</view>
				</view>
				<view>
					<u-button
						:throttleTime="700"
						@click="open"
						:customStyle="{
							height: '88rpx',
							width: '256rpx',
							font: '500 32rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="提交订单"
					></u-button>
				</view>
			</view>

			<!-- 底部弹窗 -->

			<!-- popup -->
			<u-popup
				:show="show"
				mode="bottom"
				overlayOpacity="0.6"
				:round="25"
				@close="close"
				@open="open"
			>
				<view class="d-flex flex-c ali-i-s just-s b-box" style="padding: 40rpx 0">
					<!-- title -->
					<view class="d-flex flex-r ali-i-c just-c w-100 b-box po-re">
						<text class="fw-500 pf-sc fw-500" style="font-size: 32rpx">选择支付方式</text>
						<text
							class="fw-500 pf-sc fw-500 po-ab"
							style="font-size: 32rpx; right: 42rpx"
							@click="close"
						>
							×
						</text>
					</view>
					<!--  -->
					<view
						class="d-flex flex-r ali-i-c just-sw w-100 b-box"
						@click="Select = 2"
						style="height: 120rpx; border-bottom: 2rpx solid #dedede; padding: 0 36rpx 0 32rpx"
					>
						<view class="d-flex flex-r ali-i-c just-s">
							<image
								:src="require('.././static/hy2.png')"
								style="width: 56rpx; height: 56rpx; margin-right: 16rpx"
							></image>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx">余额支付</text>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx">
								（￥{{ user.money }}）
							</text>
						</view>
						<view v-if="Select === 2">
							<image
								:src="require('.././static/xz.png')"
								style="width: 36rpx; height: 36rpx"
							></image>
						</view>
					</view>
					<view
						class="d-flex flex-r ali-i-c just-sw w-100 b-box"
						@click="Select = 1"
						style="height: 120rpx; border-bottom: 2rpx solid #dedede; margin-bottom: 60rpx; padding: 0 36rpx 0 32rpx"
					>
						<view class="d-flex flex-r ali-i-c just-s">
							<image
								:src="require('.././static/hy3.png')"
								style="width: 56rpx; height: 56rpx; margin-right: 16rpx"
							></image>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx">微信支付</text>
							<!-- <text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（2次可用）</text> -->
						</view>
						<view v-if="Select === 1">
							<image
								:src="require('.././static/xz.png')"
								style="width: 36rpx; height: 36rpx"
							></image>
						</view>
					</view>
					<!-- btn -->
					<view class="d-flex flex-r ali-i-c just-c w-100 b-box" style="margin-bottom: 12rpx">
						<u-button
							@click="SubmitOrder"
							:customStyle="{
								height: '88rpx',
								width: '670rpx',
								font: '500 32rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="确定"
						></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';

import { address, goodsdetail, gbuynow, countmoney } from '@/common/api.js';

import uButton from '../components/uview-ui/components/u-button/u-button';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': uButton
	},
	data() {
		return {
			user: uni.getStorageSync('userInfo'), //获取当前用户的信息
			Select: '', //选中的那个
			show: false, //控制底部的弹窗
			containerHeight: '',
			addresslist: '',
			//上一页传递商品数据
			shopping: null,
			//上一页传递商品规格参数
			OriginData: null,
			beizhu: '',
			id: '', //商品id
			count: '', //购买数量
			name: '', //商品名称
			image: '', //商品图片
			price: '', //商品单价
			acid: '', //产品规格id
			specs: '', //选择的规格
			valueids: [], //多个规格id
			hyprice: '', //会员价
			isVip: false
		};
	},

	onLoad(options) {
		this.isVip = this.user.level > 0 ? true : false;
		console.log(this.isVip, 'vip');
		this.id = options.id;
		this.count = options.count;
		this.image = options.img;
		this.name = options.name;
		this.price = options.price;
		this.acid = options.acid;
		this.specs = JSON.parse(options.specs);
	},
	onShow() {
		console.log(12345);
		this.getAddress();
		this.getMoney();
	},
	methods: {
		//提交订单计算金额
		getMoney() {
			console.log(12345);
			for (let i = 0; i < this.specs.length; i++) {
				if (this.valueids.indexOf(this.specs[i].id) === -1) {
					this.valueids.push(this.specs[i].id);
				}
			}
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.id,
				valueids: this.valueids.join(','),
				num: this.count
			};
			countmoney(params).then(res => {
				console.log(234, '提交订单计算金额');
				this.hyprice = res.data.data.sjmoney;
			});
		},
		//控制底部的显示隐藏
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},

		toxzaddress() {
			uni.navigateTo({
				url: `/userModelA/userB/AddressList/AddressList?address=${'pay'}`
			});
		},
		getAddress() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: 5
			};
			address(params).then(res => {
				// console.log(res.data.data);
				if (res.data.data) {
					this.addresslist = uni.getStorageSync('addresslist');
				}
			});
		},
		//提交订单计算金额

		towxxiadan() {
			for (let i = 0; i < this.specs.length; i++) {
				if (this.valueids.indexOf(this.specs[i].id) === -1) {
					this.valueids.push(this.specs[i].id);
				}
			}
			gbuynow({
				token: uni.getStorageSync('usertoken'),
				id: this.id,
				valueids: this.valueids.join(','),
				num: this.count,
				paytype: this.Select,
				aid: this.addresslist.id,
				beizhu: this.beizhu
			}).then(res => {
				if (res.data.code == 1) {
					var paydata = res.data.data;
					uni.requestPayment({
						provider: 'wxpay',
						// "orderInfo": {  },
						// "appid":paydata.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						nonceStr: paydata.nonceStr, // 随机字符串
						package: paydata.package, // 固定值
						partnerid: '1629006880', // 微信支付商户号
						prepayid: this.id, // 统一下单订单号
						timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
						paySign: paydata.paySign, // 签名，这里用的 MD5/RSA 签名
						signType: paydata.signType, // 签名算法
						success(res) {
							//跳转到用户订单
							uni.navigateTo({
								url: `/userModelA/userC/UserOrderList/UserOrderList`
							});
							this.show = false;
						},
						fail(e) {
							console.log(e);
							uni.showToast({
								title: e,
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},

		//余额支付走这个
		toyexiadan() {
			for (let i = 0; i < this.specs.length; i++) {
				if (this.valueids.indexOf(this.specs[i].id) === -1) {
					this.valueids.push(this.specs[i].id);
				}
			}
			gbuynow({
				token: uni.getStorageSync('usertoken'),
				id: this.id,
				valueids: this.valueids.join(','),
				num: this.count,
				paytype: this.Select,
				aid: this.addresslist.id,
				beizhu: this.beizhu
			}).then(res => {
				if (res.data.code === 1) {
					uni.showToast({
						title: '购买成功'
					});
					setTimeout(() => {
						//跳转到用户订单
						uni.navigateTo({
							url: `/userModelA/userC/UserOrderList/UserOrderList`
						});
					}, 1000);
					this.show = false;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		SubmitOrder() {
			//跳转到提交订单页面
			if (this.Select != 1 && this.Select != 2) {
				return uni.showToast({
					title: '请选择您的付款方式',
					icon: 'none'
				});
			}

			if (this.Select === 1) {
				this.towxxiadan();
			}
			if (this.Select === 2) {
				this.toyexiadan();
			}
		}
	}
};
</script>

<style lang="scss">
.submit-order {
}
</style>
